<!doctype html>
<html class="no-js ">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="assets/css/amazeui.css" />
    <link rel="stylesheet" href="assets/css/admin.css">
    <script src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/amazeui.min.js"></script>
    <style>
        #vld-tooltip {
            position: absolute;
            z-index: 1000;
            padding: 5px 10px;
            background: #F37B1D;
            min-width: 150px;
            color: #fff;
            transition: all 0.15s;
            box-shadow: 0 0 5px rgba(0, 0, 0, .15);
            display: none;
        }

        #vld-tooltip:before {
            position: absolute;
            top: -8px;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -8px;
            content: "";
            border-width: 0 8px 8px;
            border-color: transparent transparent #F37B1D;
            border-style: none inset solid;
        }
    </style>
</head>

<body style="background-color: #f5f5f5;">
<div class="am-g" style="max-width: 1100px; margin-bottom: 80px;">
    <header class="am-topbar admin-header topbar-color headerbg" style="max-width: 1100px;margin-bottom: 10%;">
        <div class="am-topbar-brand">
            <strong><img src="assets/images/logo2.png">	</strong>

        </div>

    </header>
    <div class="am-u-md-7 am-text-center"><img src="http://hd.miku.cf/statics/images/login_bg.jpg" style="max-width: 100%;height: auto;"></div>
    <div class="am-u-md-5">

        <form class="am-g am-padding-sm" id="form-with-tooltip">
            <div class="am-g am-margin-top-sm ">
                <div class=" am-u-sm-7 am-md-text-left am-vertical-align-middle" style="font-size: 2.4rem;">
                    会员登录
                </div>
                <div class=" am-u-sm-5 am-text-right" style="line-height: 3.2rem;">
                    还没有帐号<a href="admin-regist.html" style="color: #F37B1D;">立即注册</a>
                </div>
            </div>
            <div class="am-g am-margin-top-sm am-form-group">
                <div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
                    帐号
                </div>
                <div class="am-u-sm-12 am-u-md-9">
                    <input type="text" class="am-form-field am-radius" type="text" id="doc-vld-name-2-0" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
                </div>
            </div>
            <div class="am-g am-margin-top-sm am-form-group">
                <div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
                    密码
                </div>
                <div class="am-u-sm-12 am-u-md-9">
                    <input type="text" class="am-form-field am-radius" type="password" id="doc-vld-pwd-1-0" placeholder="请输入密码" pattern="^\d{6}$" required data-foolish-msg="请输入密码" />
                </div>
            </div>

            <div class=" am-u-sm-4 am-u-sm-offset-8 ">
                <div class="am-checkbox">
                    <label>
                        <input type="checkbox"> 保持登录
                    </label>
                </div>
            </div>

            <div class=" am-g ">
                <div class="am-u-md-1 am-hide-sm-only"></div>
                <div class=" am-u-sm-12 am-u-md-11 am-margin-bottom-sm">
                    <button type="submit" class="am-btn am-btn-primary am-radius am-btn-block">登录</button>
                </div>

            </div>

        </form>

    </div>

</div>
<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }" style="position: fixed;bottom: 0;width: 100%;">

    <div class="am-footer-miscs">
        <p>由 <a href="http://www.yunshipei.com/" title="诺亚方舟" target="_blank" class="">学点网络</a> 提供技术支持</p>
        <p>CopyRight©2014 wuhanxd Inc.</p>
    </div>
</footer>
</body>
<script language="JavaScript">
    $(function() {
        var $form = $('#form-with-tooltip');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);
        $form.validator();
        var validator = $form.data('amui.validator');
        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);
                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));
                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });
    });
</script>

</html>
No newline at end of file
